<template>
  <div>
    
    <div class="swi-top">
      <!-- 轮播图 -->
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="(ban,index) in banners" :key="index">
          <!-- <div class="img" ></div> -->
          <img :src="ban.imageUrl" alt="" />
        </swiper-slide>

        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>

      <div class="download">
        <a href="javascript:;"></a>
        <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  title: "Pagination",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: {
          stopOnLastSlide: true,
        },
      },
      banners: [],
    };
  },
  mounted() {
    this.getBanner();
  },
  methods: {
    // 获取轮播图
    async getBanner() {
      const resule = await this.$API.getSlideShow();
      // console.log(resule);
      if (resule.code == 200) {
        this.banners = resule.banners || [];
      } else {
        alert("出错来了");
      }
    },
  },
};
</script>
<style lang="less" scoped>

.swi-top {
  display: flex;
  width: 984px;
  margin: 0 auto;
}

.swiper {
  height: 283px;
  width: 728px;
  // display: ;

  // border: 1px transparent solid;
  img {
    height: 283px;
    width: 728px;
  }
  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    background-color: rgb(98, 168, 200);
    .img {
      height: 283px;
      width: 730px;
      background-color: blue;
    }
  }
  .swiper-button-prev {
    // left: -100px;
    position: absolute;
  }
  .swiper-button-next {
    // right: -10px;
    position: absolute;
  }
}

.download {
  background-color: rgb(48, 46, 44);
  width: 254px;
  height: 285px;
  position: relative;
  background-image: url(@/assets/image/download.png);
  a {
    background-image: url(@/assets/image/download.png);
    display: block;
    width: 215px;
    height: 56px;
    margin: 186px 0 0 19px;
    background-position: -21px 10053px;
    text-indent: -9999px;
  }
  p {
    bottom: 14px;
    left: 12px;
    font-size: 12px;
    color: rgb(141, 141, 141);
    display: block;
    position: absolute;
  }
}
</style>
